<template>
    <div>
     <div class="ce-quan">
      <p class="ce-1">用户更换密码</p>
      <p class="ce-2">很高兴您将成为商城的会员（修改只需一步）</p>
      <p class="ce-3">
        <input type="text" placeholder="手机号码" />
        <!-- <span>必填</span> -->
        <span class="you">
          <van-icon name="phone-o" />
        </span>
      </p>
      <p class="ce-3">
        <input type="text" placeholder="密码" v-show="isShow" />
        <input type="password" placeholder="密码" v-show="!isShow" />
        <!-- <span >必填</span> -->
        <span class="you" v-show="!isShow" @click="dain" style="cursor: pointer;">
          <van-icon name="closed-eye" />
        </span>
        <span class="you" v-show="isShow" @click="dian" style="cursor: pointer;">
          <van-icon name="eye-o" />
        </span>
      </p>
      <p class="ce-3">
        <input type="text" placeholder="确认密码" v-show="iShow" />
        <input type="password" placeholder="确认密码" v-show="!iShow" />
        <!-- <span >必填</span> -->
        <span class="you" v-show="!iShow" @click="din" style="cursor: pointer;">
          <van-icon name="closed-eye" />
        </span>
        <span class="you" v-show="iShow" @click="dni" style="cursor: pointer;">
          <van-icon name="eye-o" />
        </span>
      </p>
     
      <!-- <p class="ce-4">
        <input type="text" placeholder="获取验证码" />
      </p> -->
        <p class="ce-4">
        <input type="text"  />
        <Button class="counterButtton"/>
      </p>

      <div>
        <span class="deng">修改密码</span>
      </div>

      <div class="ce" @click="four">
        <p class="ce-5">放弃修改？返回主页</p>
      </div>
    </div>
    </div>
</template>
<script>
import Button from "../components/CounterButton"

export default {
  data() {
    return {
      isShow: false,
      iShow: false,
      show: false
    };
  },
   components:{
    Button
  },
  methods: {
    dain() {
      this.isShow = true;
    },
    dian() {
      this.isShow = false;
    },
    din() {
      this.iShow = true;
    },
    dni() {
      this.iShow = false;
    },
    showPopup() {
      this.show = true;
    },
    four(){
        this.$router.push({
            path:'/home'
        })
    }
  }
};
</script>
<style >
    .ce-quan {
  width: 90%;
  height: 13rem;
  border: 1px solid #eee;
  margin: 0 auto;
  margin-top: 0.5rem;
}
.ce-1 {
  font-size: 0.5rem;
  margin-top: 0.5rem;
  margin-left: 0.5rem;
}
.ce-2 {
  font-size: 0.3rem;
  margin-top: 0.5rem;
  margin-left: 0.5rem;

  color: gray;
}
.counterButtton{
  width: 1rem;
  /* height: 0.6rem; */
  text-align: center;
  float: right;
  display: flex;
  align-items: center;
}
.ce-3 {
  width: 5rem;
  height: 0.86rem;
  border-radius: 0.12rem;
  background: #f5f5f5;
  /* border: 1px solid red; */
  margin-top: 0.7rem;
  margin-left: 0.5rem;
}
.you {
  padding-left: 0.7rem;
}
.ce-3 input {
  outline: none;
  border: 0rem solid red;
  /* line-height: 0.76rem; */
  margin-top: 0.27rem;
  background: #f5f5f5;
  margin-left: 0.1rem;
}
.ce-4 {
  width: 5rem;
  height: 0.86rem;
  border-radius: 0.12rem;
  background: #f5f5f5;
  /* border: 1px solid red; */
  margin-top: 0.44rem;
  margin-left: 0.5rem;
  font-size: 0.3rem;
}
.ce-4 input {
  width: 1.5rem;
  outline: none;
  border: 0rem solid red;
  /* line-height: 0.76rem; */
  /* margin-top: 0.27rem; */
  background: #f5f5f5;
  
}
.deng{
        
        padding-top: 0.3rem;
        padding-bottom: 0.3rem;
        padding-left: 1.2rem;
        padding-right: 1.2rem;
        border-radius: 0.1rem;
        color: white;
        background: linear-gradient(135deg, #e570e7 0%, #79f1fc 100%);
        position: relative;
        top: 1rem;
        left: 1.6rem;
    }
    .ce-5{
        color: #549ff9;
        margin-left: 0.4rem;
        margin-top: 0.5rem;
    }
    .ce{
        position: relative;
        top: 1.5rem;
         left: 1.6rem;
    }
</style>